<template>
  <div>
    <div
      class="col-md-12"
      style="border-top: 1px solid #ccc; border-bottom: 1px solid #ccc"
    >
      <el-row>
        <el-col :span="16" style="padding-left: 20px">
          <el-tooltip
            class="item"
            effect="dark"
            content="选择要显示的列"
            placement="top"
          >
            <el-popover placement="bottom" width="300" trigger="click">
              <el-col :span="12">
                <el-checkbox
                  v-model="showCustomerCode"
                  @change="showHide('showCustomerCode')"
                  >客户代码
                </el-checkbox>
              </el-col>
              <el-col :span="12">
                <el-checkbox
                  v-model="showCustomerStatus"
                  @change="showHide('showCustomerStatus')"
                  >客户状态
                </el-checkbox>
              </el-col>
              <el-col :span="12">
                <el-checkbox
                  v-model="showCustomerCate"
                  @change="showHide('showCustomerCate')"
                  >客户类别
                </el-checkbox>
              </el-col>
              <el-col :span="12">
                <el-checkbox
                  v-model="showCreditRank"
                  @change="showHide('showCreditRank')"
                  >客户信用等级
                </el-checkbox>
              </el-col>
              <el-col :span="12">
                <el-checkbox
                  v-model="showCreditLine"
                  @change="showHide('showCreditLine')"
                  >授信额度
                </el-checkbox>
              </el-col>
              <el-col :span="12">
                <el-checkbox
                  v-model="showCapital"
                  @change="showHide('showCapital')"
                  >注册资金</el-checkbox
                >
              </el-col>
              <el-col :span="12">
                <el-checkbox
                  v-model="showAnnualSales"
                  @change="showHide('showAnnualSales')"
                  >年销售额
                </el-checkbox>
              </el-col>
              <el-col :span="12">
                <el-checkbox v-model="showBank" @change="showHide('showBank')"
                  >对公银行账号</el-checkbox
                >
              </el-col>
              <el-col :span="12">
                <el-checkbox
                  v-model="showCertificateNo"
                  @change="showHide('showCertificateNo')"
                  >开户银行
                </el-checkbox>
              </el-col>
              <el-col :span="12">
                <el-checkbox
                  v-model="showAddress"
                  @change="showHide('showAddress')"
                  >税务登记证号
                </el-checkbox>
              </el-col>
              <el-col :span="12">
                <el-checkbox v-model="showArea" @change="showHide('showArea')"
                  >地址</el-checkbox
                >
              </el-col>
              <el-col :span="12">
                <el-checkbox v-model="showBrand" @change="showHide('showBrand')"
                  >经营面积</el-checkbox
                >
              </el-col>
              <el-col :span="12">
                <el-checkbox
                  v-model="showBankAccount"
                  @change="showHide('showBankAccount')"
                  >模拟，对应列表的列项
                </el-checkbox>
              </el-col>
              <el-button
                size="small"
                slot="reference"
                type="plain"
                class="setting"
              >
                <div style="display: flex; flex-direction: column">
                  <i class="el-icon-setting"></i>
                  <span style="margin-top: 3px">显示设置</span>
                </div>
              </el-button>
            </el-popover>
          </el-tooltip>

          <el-button
            @click="handleImport(3)"
            size="small"
            style="margin-top: 10px; margin-bottom: 10px; margin-left: 10px"
            type="plain"
            class="setting"
          >
            <div style="display: flex; flex-direction: column">
              <i class="el-icon-setting"></i>
              <span style="margin-top: 3px">上报审批</span>
            </div>
          </el-button>

          <el-button
            @click="handleImport(4)"
            size="small"
            style="margin-top: 10px; margin-bottom: 10px"
            type="plain"
            class="setting"
          >
            <div style="display: flex; flex-direction: column">
              <i class="el-icon-setting"></i>
              <span style="margin-top: 3px">转为订单</span>
            </div>
          </el-button>
          <el-input
            placeholder
            v-model="inputSearch"
            class="input-with-select input-search"
            style="margin-left: 10px; width: 450px; height: 47px; top: 9px"
            speech
            x-webkit-speech
            size="large"
          >
            <el-select
              v-model="selectsearch"
              slot="prepend"
              placeholder="请选择"
            >
              <el-option label="客户名称" value="1"></el-option>
              <el-option label="款号" value="2"></el-option>
              <el-option label="审批状态" value="3"></el-option>
              <el-option label="物品名称" value="4"></el-option>
              <el-option label="物品类别" value="7"></el-option>
              <el-option label="序号id" value="5"></el-option>
              <el-option label="客户代码" value="6"></el-option>
            </el-select>
            <i slot="prefix" class="iconfont iconpaizhao1"></i>

            <el-button slot="append" icon="el-icon-search" style="height: 47px"
              >查询</el-button
            >
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-tooltip
            class="item"
            effect="dark"
            content="操作：选择下面列表，然后点击按钮"
            placement="top"
          >
            <el-button
              @click="handleDelCustomer(1)"
              size="small"
              style="margin:10px;float: right"
              type="plain"
              class="setting"
            >
              <div style="display: flex; flex-direction: column">
                <i class="el-icon-setting"></i
                ><span style="margin-top: 3px">删除</span>
              </div>
            </el-button>
          </el-tooltip>
          <el-button
            @click="handleImport(2)"
            size="small"
            style="margin-top: 10px; margin-bottom: 10px; float: right"
            type="plain"
            class="setting"
          >
            <div style="display: flex; flex-direction: column">
              <i class="el-icon-setting"></i
              ><span style="margin-top: 3px">导出</span>
            </div>
          </el-button>
          <el-button
            @click="handleImport(1)"
            size="small"
            style="margin-top: 10px; margin-bottom: 10px; float: right"
            type="plain"
            class="setting"
          >
            <div style="display: flex; flex-direction: column">
              <i class="el-icon-setting"></i
              ><span style="margin-top: 3px">导入</span>
            </div>
          </el-button>

          <el-button
            @click="handleSelectionChange"
            size="small"
            style="margin-top: 10px; margin-bottom: 10px; float: right"
            type="plain"
            class="setting"
          >
            <div style="display: flex; flex-direction: column">
              <i class="el-icon-setting"></i
              ><span style="margin-top: 3px">新建</span>
            </div>
          </el-button>
        </el-col>
      </el-row>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      stripe
      height="600"
      row-class-name="tableRow"
      header-row-class-name="tableHeader"
      @row-dblclick="handleSelectionChange1"
      style="width: 100%; border-top: 1px solid #c5c5c5"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="序号" sortable width="80">
      </el-table-column>
      <el-table-column prop="image" label="图片" width="120">
                <template scope="scope">
                    <img :src="scope.row.image" width="40" height="40" class="head_pic"/>
                </template>
      </el-table-column>
      <el-table-column prop="kfmc" label="客户名称" sortable width="150">
      </el-table-column>
      <el-table-column prop="kflxr" label="客户联系人" sortable width="150">
      </el-table-column>
            <el-table-column prop="wxlr" label="维修内容" sortable width="150">
      </el-table-column>
            <el-table-column prop="wxfy" label="维修费用" sortable width="150">
      </el-table-column>
      <el-table-column prop="spzt" label="审批状态" sortable width="120">
      </el-table-column>
      <el-table-column prop="wpmc" label="物品名称" sortable width="120">
      </el-table-column>
      <el-table-column prop="smjg" label="声明价格" sortable width="120">
      </el-table-column>
      <el-table-column prop="kh" label="款号" sortable width="120">
      </el-table-column>
      <el-table-column prop="zsmc" label="主石名称" sortable width="120">
      </el-table-column>
      <el-table-column prop="zsls" label="主石粒数" sortable width="80">
      </el-table-column>
      <el-table-column prop="zszl" label="主石重量" sortable width="80">
      </el-table-column>
      <el-table-column prop="fsmc" label="副石名称" sortable width="120">
      </el-table-column>
      <el-table-column prop="fsls" label="副石粒数" sortable width="80">
      </el-table-column>
      <el-table-column prop="fszl" label="副石重量" sortable width="80">
      </el-table-column>
      <el-table-column prop="dw" label="单位" sortable width="80">
      </el-table-column>
      <el-table-column prop="ggcc" label="规格尺寸/手寸" sortable width="120">
      </el-table-column>
      <!-- <el-table-column prop="cc" label="" sortable width="120">
      </el-table-column> -->
      <el-table-column prop="gjspl" label="金属品类" sortable width="120">
      </el-table-column>
      <el-table-column prop="cjr" label="创建人" width="120">
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="120">
      </el-table-column>
      <el-table-column prop="update_time" label="更新时间" width="120">
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      ></el-pagination>
    </div>

    <baojia-repair-add
      v-bind:dialogshow="dialogBaojiaAdd"
      @dialog_close="dialogBaojiaAdd = !dialogBaojiaAdd"
    ></baojia-repair-add>
    <baojia-repair-info
      v-bind:dialogshow="dialogBaojiaInfo"
      @dialog_close="dialogBaojiaInfo = !dialogBaojiaInfo"
    ></baojia-repair-info>
    <!-- <send-message
      v-bind:dialogshow="dialogSendMessage"
      @dialog_close="send_message_dialog_close"
    ></send-message>
    <send-weixin
      v-bind:dialogshow="dialogWeixin"
      @dialog_close="send_weixin_dialog_close"
    ></send-weixin>
    <send-email
      v-bind:dialogshow="dialogEmail"
      @dialog_close="send_email_dialog_close"
    ></send-email>
  </div> -->
</template>

<style scoped>

.tableHeader th {
  background-color: #f5f5f5 !important;
  /*color: #000000;*/
  /*border-color: #c5c5c5;*/
}

.el-tabs__content {
  padding: 0px !important;
}


/* #pricesManages .el-form-item {
  width: 200px !important;
  float: left;
  margin-bottom: 5px;
}

#pricesManages .el-form-item .el-form-item__label {
  width: 120px !important;
}

#pricesManages .el-form-item .el-form-item__content {
  margin-left: 120px !important;
} */


.el-dialog__body,
.el-form {
  overflow: hidden;
}

.tableRow {
  cursor: pointer;
}

.upload-demo {
  margin-top: 20px;
}
</style>

<script>
module.exports = {
  methods: {
    handleSizeChange1(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    addData() {
      this.tableDatas.push({
        edit: true,
      });
    },
    //确认添加
    confirmAdd(row) {
      row.edit = false;
    },
    //修改
    editData(row) {
      row.edit = true;
    },
    //删除
    deleteData(row, index) {
      this.tableDatas.splice(index, 1);
    },
    handleClick(row) {
      console.log(row);
      console.log(22);

      this.dialogHistoryPricesList = true;

      event.preventDefault();

      event.stopPropagation();
    },
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex === 2) {
    //     return {
    //       rowspan: row.rowspan,
    //       colspan: 1,
    //     };
    //   }
    // },
    handleSelectionChange(val) {
      //显示新建报价单
      console.log(333);
      this.dialogBaojiaAdd = true;
    },
    handleSelectionChange1(val) {
      //显示报价单详情
      console.log(333);
      this.dialogBaojiaInfo = true;
    },
    // handleSelectionChange2 (val) {
    //   //显示编辑单详情
    //   console.log(333)
    //   this.dialogBaojiaEdit = true
    // },

    openChangeCustomerDialog(val) {
      this.dialogCostomsChange = true;
    },

    handleDelCustomer(val) {
      // 删除操作
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    handleImport(val) {
      if (val === 1) {
        //导入操作
        this.$alert("打开文件夹导入工作", "导入", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "success",
              message: "导入成功",
            });
          },
        });
      } else if (val === 2) {
        //导出操作
        this.$alert("打开文件夹导出工作", "导出", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "success",
              message: "导出表格成功",
            });
          },
        });
      } else if (val === 3) {
        //导出操作
        this.$confirm("提交审核, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "提交成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
      } else if (val === 4) {
        //导出操作

        this.$confirm("是否生成订单, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
      }
    },

    handleButtons(val) {
      switch (val) {
        case 1:
          this.dialogSendMessage = "true";
          console.log(this.dialogSendMessage);
          break;
        case 2:
          this.dialogWeixin = "true";
          console.log(this.dialogWeixin);
          break;
        case 3:
          this.dialogEmail = "true";
          console.log(this.dialogEmail);
          break;
        case 4:
          this.dialogChangeCustomer = "true";
          console.log(this.dialogChangeCustomer);
          break;
        case 6:
          this.$confirm("是否继续操作?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
          break;
      }
    },
    handleChangeCustomer(val) {
      this.dialogChangeCustomer = "true";
      console.log(this.dialogChangeCustomer);
    },
    dialogAdd() {
      console.log(123);
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "";
        }
      });

      return sums;
    },
    showHide(text) {
      console.log(text);
    },
    send_message_dialog_close(val) {
      console.log(val);
      this.dialogSendMessage = false;
    },
    send_weixin_dialog_close(val) {
      this.dialogWeixin = false;
    },
    send_email_dialog_close(val) {
      this.dialogEmail = false;
    },
    change_customer_dialog_close(val) {
      console.log(val);
      this.dialogChangeCustomer = false;
    },
    clickfullscreen() {
      this.fullscreen = !this.fullscreen;
    },
  },

  data() {
    return {
      fullscreen: false,
      currentPage1: 10,
      inputSearch: "",
      selectsearch: "",
      arrs: [],

      tableDatas: [],
      fileList: [],

      dialogCostoms: false,
      dialogHistoryPricesList: false,
      dialogCostomsChange: false,
      dialogSendMessage: false,
      dialogWeixin: false,
      dialogEmail: false,
      dialogChangeCustomer: false, //客户跟进
      dialogBaojiaAdd: false, //新建报价单
      dialogBaojiaInfo: false, //报价单详情
      // dialogBaojiaEdit:false,//编辑报价单,另外放入详情组件里
      scheduleType: [{ typename: "清理库存" }, { typename: "节日促销" }],
      historyPrices: [
        {
          date: "2019-05-02",
          name: "100",
          typename: "清理库存",
          address: "2019-05-02 - 2020-01-01",
        },
        {
          date: "2020-01-02",
          name: "90",
          typename: "节日促销",
          address: "2020-01-02 - 2020-02-01",
        },
      ],
      customer: {
        adjust_time: "",
        name: "",
        customercode: "",
        customerstatus: "",
        customercate: "",
        creditrank: "",
        creditline: "",
        capital: "",
        annualsales: "",
        bank: "",
        certificateno: "",
        address: "",
        area: "",
        brand: "",
        bankaccount: "",
        trademark: "",
        website: "",
        lperson: "",
        lphone: "",
        contacts: "",

        phone: "",
        phonenum: "",
        weixin: "",
        email: "",
        fax: "",
        resource: "",
        requirement: "",
        ordercountmonth: "",
        purchaseamountmonth: "",
        ordercountyear: "",
        purchaseamountyear: "",
        customerstaffname: "",
        customerstaffcode: "",
        operator: "",
        insertime: "",
        remark: "",
      },

      form: {
        typeId: "",
      },

      select: {
        name: "",
        introduce: "",
        cooperative_brand: "",
        customer_status: "",
        customer_level: "",
        now_principal_id: "",
        last_follow_up_date: "",
        create_date: "",
      },

      crmsclientStatic: [
        { typename: "类别一" },
        { typename: "类别二" },
        { typename: "类别三" },
      ],

      crmsclientRank: [
        { typename: "A类" },
        { typename: "B类" },
        { typename: "C类" },
        { typename: "D类" },
      ],

      customerstaffs: [
        { typename: "客服1" },
        { typename: "客服2" },
        { typename: "客服3" },
        { typename: "客服4" },
      ],

      changeReason: [
        { typename: "交接原因一" },
        { typename: "交接原因二" },
        { typename: "交接原因三" },
        { typename: "其他" },
      ],

      options1: [],

      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      }, //日期控件
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      }, //首次合作日期

      showCustomerCode: true,
      showCustomerStatus: true,
      showCustomerCate: true,
      showCreditRank: true,
      showCreditLine: true,
      showCapital: true,
      showAnnualSales: true,
      showBank: true,
      showCertificateNo: true,
      showAddress: true,
      showArea: true,
      showBrand: true,
      showBankAccount: true,
      showTrademark: true,
      showWebsite: true,
      showLperson: true,
      showLphone: true,
      showContacts: true,

      showPhone: true,
      showPhoneNum: true,
      showWeixin: true,
      showEmail: true,
      showFax: true,
      showResource: true,
      showRequirement: true,
      showOrderCountMonth: true,
      showPurchaseAmountMonth: true,
      showOrderCountYear: true,
      showPurchaseAmountYear: true,
      showCustomerStaffName: true,
      showCustomerStaffCode: true,
      showOperator: true,
      showInsertime: true,
      showRemark: true,

      tableData: [
        {
          id: "1",
          create_time: "2016-05-02 08:08:08",
          update_time: "2016-05-02 08:08:08",
          image:"/public/images/eh1.jpg",
          kfmc: "某珠宝公司",
          kflxr:"王先生",
          wxlr:"清洗、抛光",
          wxfy:"2000",
          smjg:"20000",
          wpmc: "戒指",
          spzt: "审批中",
          wppl: "戒指",
          kh: "WERWQE123",
          wpdj: "A类",
          dw: "件",
          gjsp: "铂金999.99%",
          fsys: "红",

        },
        {
          id: "2",
                    create_time: "2016-05-02 08:08:08",
          update_time: "2016-05-02 08:08:08",
          image:"/public/images/eh1.jpg",
          kfmc: "某珠宝公司",
          kflxr:"王先生",
          wpmc: "戒指",
          spzt: "审批中",
          wppl: "戒指",
          kh: "WERWQE123",
          wpdj: "A类",
          dw: "件",
          gjsp: "铂金999.99%",
          fsys: "红",

        },
        {
          id: "3",
                    create_time: "2016-05-02 08:08:08",
          update_time: "2016-05-02 08:08:08",
          image:"/public/images/eh1.jpg",
          kfmc: "某珠宝公司",
          kflxr:"王先生",
          wpmc: "戒指",
          spzt: "审批中",
          wppl: "戒指",
          kh: "WERWQE123",
          wpdj: "A类",
          dw: "件",
          gjsp: "铂金999.99%",
          fsys: "红",

        },
        {
          id: "4",

        },
        {
          id: "5",

        },
      ],
      multipleSelection: [],
      
    };
  },
  components: {
    // 将组建加入组建库
    // "send-message": "url:./send/send-message.vue",
    // "send-weixin": "url:./send/send-weixin.vue",
    // "send-email": "url:./send/send-email.vue",
    "baojia-repair-add": "url:./dialog/baojia-repair-add.vue",
    "baojia-repair-info": "url:./dialog/baojia-repair-info.vue",

  },
};
</script>
